import { useState } from "react";
import "./style/index.scss";
//定义的tab切换数据的类型
interface Tab {
  label: string;
}

const AddAvailabilityTow = () => {
  //tab切换数据
  const TABS: Tab[] = [{ label: "房源信息" }, { label: "SEO信息" }];
  //tab切换
  const [activeTab, setActiveTab] = useState<number>(0);
  //tab切换点击
  function handleClick(index: number) {
    setActiveTab(index);
  }
  return (
    <div className="AddAvailabilityboxfadawdaw">
      <div className="AddAvailabilityHeader">
        <div className="AddAvailabilityHeaderOne">
          {TABS.map((tab, index) => (
            <li
              key={index}
              onClick={() => handleClick(index)}
              className={index === activeTab ? "AddAvailabilityactive" : ""}
            >
              {tab.label}
            </li>
          ))}
        </div>
      </div>
      {/* tab切换 内容  房源信息*/}
      <div
        className="AddAvailabilitytab"
        style={{ display: activeTab == 0 ? "block" : "" }}
      >
        {/* 房源信息 */}
        <div className="AddAvailabilityMain">
          <div className="AddAvailabilityMainOne">
            <div>所属小区</div>
            <div>
              <input type="text" placeholder="选择小区" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainOne">
          <div className="AddAvailabilityMainTow">
            <div>房源名称</div>
            <div>
              <input type="text" placeholder="房源名称" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainTow">
          <div className="AddAvailabilityMainThird">
            <div>面积</div>
            <div>
              <input type="text" placeholder="122" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainThird">
          <div className="AddAvailabilityMainFour">
            <div>总价</div>
            <div>
              <input type="text" placeholder="122" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilityMainThirdA">
          <button>提交</button>
        </div>
      </div>
      {/* tab切换 内容  seo信息*/}
      <div
        className="AddAvailabilitytab"
        style={{ display: activeTab == 1 ? "block" : "" }}
      >
        {/* seo信息 */}
        <div className="AddAvailabilitytabOne">
          <div className="AddAvailabilitytabOneA">
            <div>seo标题</div>
            <div>
              <input type="text" placeholder="seo标题" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabTow">
          <div className="AddAvailabilitytabTowA">
            <div>seo关键词</div>
            <div>
              <input type="text" placeholder="seo关键词" />
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabThird">
          <div className="AddAvailabilitytabThirdA">
            <div>seo描述</div>
            <div>
              <textarea></textarea>
            </div>
          </div>
        </div>
        <div className="AddAvailabilitytabFour">
          <button>提交</button>
        </div>
      </div>
    </div>
  );
};

export default AddAvailabilityTow;
